<script setup lang="ts">
import { ref } from "vue";
import type { FormDesignerComponents } from "../FormComponentMixin";
import CommonConfig from "./CommonConfig.vue";
import DefTablePicker from "@/components/def/defTablePicker.vue";
import type { DefColumn } from "@/views/def/table/DefColumn";
import { queryList } from "@/api/def/columnctrl/";

const config = defineModel<FormDesignerComponents>("config");
const defTablePickerRef = ref(null);
const columnList = ref<DefColumn[]>([]);

const handleOpenPicker = () => {
  defTablePickerRef?.value.show();
};

const queryColumnDataList = () => {
  queryList({
    tableId: config.value.props.sourceTableId,
    columnShow: true
  }).then(res => {
    if (res.code === 200) {
      columnList.value = res.data;
    }
  });
};

const handleTableChange = row => {
  config.value.props.sourceTableId = row.id;
  config.value.props.sourceTableComment = row.tableComment;
  queryColumnDataList();
};

onMounted(() => {
  if (config.value.props.sourceTableId) {
    queryColumnDataList();
  }
});
</script>
<template>
  <CommonConfig v-model:config="config" />
  <el-form-item label="提示文字">
    <el-input v-model="config.props.placeholder" placeholder="输入提示" />
  </el-form-item>
  <el-form-item label="是否多选">
    <el-switch v-model="config.props.multiple" />
  </el-form-item>
  <el-form-item label="隐藏名称">
    <el-switch v-model="config.props.hideLabel" />
  </el-form-item>
  <el-form-item label="最大高度">
    <el-input-number
      v-model="config.props.height"
      placeholder="请设置表格最大高度"
    />
  </el-form-item>
  <el-form-item label="实体表" required>
    <el-input
      v-model="config.props.sourceTableComment"
      :disabled="true"
      placeholder="请选择实体表"
    >
      <template #append>
        <el-button icon="Search" @click="handleOpenPicker" />
      </template>
    </el-input>
  </el-form-item>
  <DefTablePicker ref="defTablePickerRef" @change="handleTableChange" />
</template>

<style lang="scss" scoped></style>
